// 设备管理
<template>
  <div class="containerBox wrap">
    <cusCard>
      <div class="searchBox">

        <el-form :model="deviceForm" :inline="true" @keyup.enter="searchHandler">
          <el-form-item label="设备名称">
            <el-input v-model="deviceForm.deviceName" placeholder="请输入设备名称"></el-input>
          </el-form-item>
          <el-form-item label="设备状态">
            <el-select v-model="deviceForm.deviceStatus" placeholder="请选择" @change="searchHandler">
              <el-option v-for="item in deviceTypeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <cusButton color="#0052D9" @click="searchHandler">查询</cusButton>
            <cusButton CssObj="border-color:#0052D9;color:#0052D9" @click="resetHandler">重置
            </cusButton>
          </el-form-item>
        </el-form>
      </div>
    </cusCard>
    <cusCard class="cmt-16 wrap-table">
      <cusButton color="#0052D9" @click="addHandler('add')">
        <i-ep-plus />添加
      </cusButton>
      <cusTable :tableData="deviceTableData" :tableColumns="tableColumns" :showSelect="false" :loading="loading"
        @changeCol="changeCol" @changeRow="changeRow" height="500px">
        <template #deviceStatus="{ row }">
          <div v-if="row.deviceStatus == 'online'">
            <p class="radio" style="background: rgb(0, 253, 63);"></p>在线
          </div>
          <div v-if="row.deviceStatus == 'offline'">
            <p class="radio" style="background: rgb(241, 6, 6);"></p>离线
          </div>
          <div v-if="row.deviceStatus == 'not_active'">
            <p class="radio" style="background: #a9acac;"></p>未激活
          </div>
        </template>
        <template #time="{ row }">
          {{ row.gmtStart }} - {{ row.gmtEnd }}
        </template>
        <template #createdSource="{ row }">
          {{ row.createdSource == 'app' ? '留样柜App' : '后台' }}
        </template>

        <template #isKeep="{ row }">
          <el-switch v-model="row.isKeep" :active-value="1" inline-prompt :inactive-value="0" active-text="是"
            inactive-text="否" disabled />
        </template>
        <template #operation="{ row }">
          <cusButton style="color:#0052D9;padding:0" :text="true" @click="boundHnadler(row)">
            绑定人员
          </cusButton>
          <cusButton style="color:#0052D9;padding:0" :text="true" @click="setHandler(row)">参数配置
          </cusButton>

        </template>
      </cusTable>
      <div class="cmt-16 float-right">
        <cusPagination @handleSizeChange="sizeChange" @handleCurrentChange="currentChange" :all="pageObj">
        </cusPagination>
      </div>
    </cusCard>
    <editDialog ref="editDialogRef" @onInit="getDeviceList"></editDialog>
    <bound ref="boundRef"></bound>
    <setting ref="setRef"></setting>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { reqDeviceList } from "@/api/business/device";
import { SearchDeviceList, InfoList, PubliceSearchPage } from '@/api/business/device/type'
import editDialog from "./components/editDialog.vue";
import bound from "./components/bound.vue";
import setting from "./components/setting.vue";
import EXIF from 'exif-js';
const router = useRouter();

const formOrigin = () => ({
  deviceName: "",
  deviceStatus: "",
});

const deviceForm = ref<SearchDeviceList>(formOrigin());

const deviceTypeList = ref([
  {
    label: "全部",
    value: "",
  },
  {
    label: "未激活",
    value: "not_active",
  },
  {
    label: "离线",
    value: "offline",
  },
  {
    label: "在线",
    value: "online",
  },
]);

const pageInit = () => ({
  total: 0,
  page: 1,
  pageSize: 10,
});
const pageObj = ref<PubliceSearchPage>(pageInit());
const loading = ref(false);

const searchHandler = () => {
  getDeviceList();
};

// 重置查询
const resetHandler = () => {
  deviceForm.value = formOrigin();
  pageObj.value = pageInit();
  getDeviceList();
};
const sizeChange = (val: number) => {
  pageObj.value.pageSize = val;
  getDeviceList();
};

const currentChange = (val: number) => {
  pageObj.value.page = val;
  getDeviceList();
};

const editDialogRef = ref(ElForm);
const addHandler = () => {
  editDialogRef.value.showHandler();
};

// 表格列数据
const tableColumns = reactive([
  { label: "设备ID", prop: "machineCode", width: "120" },
  { label: "设备名称", prop: "deviceName", width: "120" },
  { label: "所属机构", prop: "unitName", width: "120" },
  { label: "设备状态", prop: "deviceStatus", slot: true, width: "150" },
  { label: "来源", prop: "createdSource", slot: true, width: "150" },
  { label: "设备序列号", prop: "deviceId", width: "150" },
  { label: "创建时间", prop: "gmtCreate", width: "200" },
  {
    label: "操作",
    prop: "operation",
    slot: true,
    width: "180",
    fixed: "right",
  },
]);

const deviceTableData = ref<InfoList[]>();

const getDeviceList = () => {
  loading.value = true;
  let parpms = {

  }
  reqDeviceList({
    currentPage: pageObj.value.page,
    pageSize: pageObj.value.pageSize,
    ...deviceForm.value,
  }).then((res) => {
    loading.value = false;
    if (res) {
      deviceTableData.value = res.data.list;
      pageObj.value.total = res.data.total;
    }
  });
};


onMounted(() => {
  getDeviceList();

});

const boundRef = ref(ElForm);
const boundHnadler = (row: InfoList) => {
  boundRef.value.show(row.machineCode);
};
const setRef = ref(ElForm);
const setHandler = (row: InfoList) => {
  setRef.value.show(row.machineCode);
};



</script>

<style lang="scss" scoped>
.radio {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 8px;
}
</style>